<template>
  <view :class="theme">
    <u-image class="fixed" style="top: 0; left: 0; right: 0; bottom: 0; top: var(--window-top);" width="100%" height="530"
      src="/static/img/header-auth.png" />
    <view class="relative" style="margin: calc(var(--window-top) + 100rpx) 30rpx 0;">
      <view class="fd-row ai-center">
        <view class="f1 oh ml-12 mr-12">
          <label class="ai-baseline">
            <text v-if="+userInfo.level" class="fs-50 fw-700 text-center mr-12"
              style="min-width: 90rpx; font-style: italic; background-image: linear-gradient(-45deg, #CB7B54 0%, #F04033 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
              V{{ userInfo.level }}
            </text>
            <text class="f1 fs-40 fw-600 ellipsis">{{ userInfo.nickname }}</text>
          </label>
          <label @click="copyText(String(userInfo.user_sn))" class="mt-24">
            <text class="color-9">ID: {{ userInfo.user_sn }}</text>
            <text class="ml-24 mr-6 color-5">复制</text>
            <u-image width="22" height="22" src="/static/img/icon-copy.png" />
          </label>
        </view>
        <view @click="uniNavigator({ url: '/pages/client/main/profile' })" class="fd-row" hover-class="tap-hover">
          <view class="br-50percent p-4 mr-12" style="background-image: linear-gradient(221deg, #56bdfc, #b99cf9);">
            <u-image style="background-color: #fff;" radius="50%" width="120" height="120"
              :src="userInfo.avatar || `/static/logo.png`" />
          </view>
          <u-icon size="26" color="#56bdfc" name="play-right-fill" />
        </view>
      </view>

      <!-- <view class="mt-30 fd-row pt-20 ai-center">
        <view @click="uniNavigator({ url: '/pages/client/main/bill?type=energy' })" hover-class="tap-hover"
          class="f1 ai-center">
          <text class="fs-40 fw-700">{{ Number(userInfo.energy || 0).toFixed(2) }}</text>
          <text class="mt-20 color-6 fs-28">能源</text>
        </view>
        <view class="height-60 width-2" style="background-color: #bebebe;" />
        <view @click="uniNavigator({ url: '/pages/client/modules/need_auth/tokenBalance' })" hover-class="tap-hover"
          class="f1 ai-center">
          <text class="fs-40 fw-700">{{ Number(userInfo.honor || 0).toFixed(2) }}</text>
          <text class="mt-20 color-6 fs-28">贡献值</text>
        </view>
        <view class="height-60 width-2" style="background-color: #bebebe;" />
        <view @click="uniNavigator({ url: '/pages/client/main/bill?type=coin' })" hover-class="tap-hover"
          class="f1 ai-center">
          <text class="fs-40 fw-700">{{ Number(userInfo.forbidden || 0).toFixed(2) }}</text>
          <text class="mt-20 color-6 fs-28">星核</text>
        </view>
      </view> -->

      <view class="mt-50 relative">
        <u-image class="absolute" radius="14" width="100%" height="100%" src="/static/img/bg-vip.png" />
        <view @click="uniNavigator({ url: '/pages/client/main/vip' })" class="relative fd-row ai-center"
          style="padding: 24rpx 40rpx;">
          <block v-if="userInfo.vip">
            <view class="f1">
              <text class="fs-30 fw-500 color-10">{{ userInfo.vip_name || "-" }}</text>
              <text class="mt-12 fs-20 color-11">{{ userInfo.exprise_time || "-" }}开通</text>
            </view>
            <button hover-class="tap-hover" class="bg-7 br-28 color-2 fw-500 fs-28 lh-54">立即升级</button>
          </block>
          <block v-else>
            <view class="f1">
              <text style="font-style: italic;" class="fs-30 fw-500 color-10">未开通VIP会员</text>
              <text class="mt-12 fs-20 color-11">权益升级 解锁专属服务</text>
            </view>
            <button hover-class="tap-hover" class="bg-7 br-28 color-2 fw-500 fs-28 lh-54">立即开通</button>
          </block>
        </view>
      </view>
      <view class="mt-30 fd-row">
        <view @click="uniNavigator({ url: '/pages/client/main/share' })" class="f1 fd-row bg-8 br-14 ai-center jc-sb"
          style="padding: 20rpx 30rpx;">
          <view class="color-12">
            <text class="fs-30 fw-600">邀请好友</text>
            <text class="mt-18 fs-22">一起赚星核币</text>
            <label class="mt-28 jc-center bg-2 br-22" style="padding: 6rpx 8rpx;">
              <text class="fs-22 mr-16 fw-500">去邀请</text>
              <u-icon size="16" color="#ac5dff" name="play-right-fill" />
            </label>
          </view>
          <u-image width="90" height="90" src="/static/img/img-gift.png" />
        </view>
        <view @click="uniNavigator({ url: '/pages/client/main/recharge' })"
          class="ml-18 f1 fd-row bg-9 br-14 ai-center jc-sb" style="padding: 20rpx 30rpx;">
          <view class="color-13">
            <text class="fs-30 fw-600">话费充值</text>
            <text class="mt-18 fs-22">星核币兑话费</text>
            <label class="mt-28 jc-center bg-2 br-22" style="padding: 6rpx 8rpx;">
              <text class="fs-22 mr-16 fw-500">去充值</text>
              <u-icon size="16" color="#f17970" name="play-right-fill" />
            </label>
          </view>
          <u-image width="90" height="90" src="/static/img/img-topUp.png" />
        </view>
      </view>

      <view @click="uniNavigator({ url: `/pages/client/otc/home` })" class="fd-row ai-center mt-30 bg-24 p-30 br-12">
        <u-image width="52" height="48" src="/static/img/icon-otc.png" />
        <text class="f1 ml-40 fs-30 fw-700 color-3">交易中心</text>
        <button class="fd-row br-30 bg-2 border-none" plain>
          <text class="color-5 fs-22 fw-700 mr-16">去交易</text>
          <u-icon size="24" :color="$config.COLOR_5" name="play-right-fill" />
        </button>
      </view>

      <view class="bg-2 br-14 p-30 mt-20">
        <view @click="uniNavigator({ url: `/pages/client/main/withdrawal` })" class="fd-row jc-sb ai-center">
          <text class="fd-row fs-30 color-3 fw-500">我的资产</text>
          <label>
            <text class="color-6 mr-6">提币</text>
            <u-icon size="18" color="#999" name="play-right-fill" />
          </label>
        </view>
        <view class="mt-30 fd-row pt-20 ai-center">
          <view @click="uniNavigator({ url: '/pages/client/main/bill?type=energy' })" hover-class="tap-hover"
            class="f1 ai-center">
            <text class="fs-36 fw-600 color-5">{{ Number(userInfo.energy || 0).toFixed(2) }}</text>
            <label class="mt-20">
              <text class="mr-6 color-6">能源</text>
              <u-icon size="16" color="#999" name="play-right-fill" />
            </label>
          </view>
          <view class="height-60 width-2" style="background-color: #eee; margin: 0 12rpx;" />
          <view @click="uniNavigator({ url: '/pages/client/main/bill?type=honor' })" class="f1 ai-center">
            <text class="fs-36 fw-600 color-5">{{ Number(userInfo.honor || 0).toFixed(2) }}</text>
            <label class="mt-20">
              <text class="mr-6 color-6">贡献值</text>
              <u-icon size="16" color="#999" name="play-right-fill" />
            </label>
          </view>
          <view class="height-60 width-2" style="background-color: #eee; margin: 0 12rpx;" />
          <view @click="uniNavigator({ url: '/pages/client/main/bill?type=coin' })" hover-class="tap-hover"
            class="f1 ai-center">
            <text>
              <text class="fs-36 fw-600 color-5">{{ Number(userInfo.coin || 0).toFixed(2) }}</text>
              <text class="ml-12 color-9 fs-22" style="text-decoration: line-through;">
                {{ Number(userInfo.forbidden || 0).toFixed(2) }}
              </text>
            </text>
            <label class="mt-20">
              <text class="mr-6 color-6">星核</text>
              <u-icon size="16" color="#999" name="play-right-fill" />
            </label>
          </view>
        </view>
      </view>

      <view class="bg-2 br-14 p-30 mt-30 mb-3a0">
        <label class="fs-30 color-3 fw-500">其他功能</label>
        <view class="mt-20 fd-row flex-wrap">
          <view @click="option.url && uniNavigator({ url: option.url })" v-for="option in options" :key="option.key"
            hover-class="tap-hover" class="pt-20 pb-20 ai-center jc-center" style="width: 25%;">
            <u-image width="50" height="50" :src="`/static/img/mine-options/${option.key}.png`" />
            <text class="mt-12 color-6">{{ option.text }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onPullDownRefresh, onShow, onTabItemTap } from "@dcloudio/uni-app";
import { ref } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const options = [
  {
    key: "team",
    text: "我的团队",
    url: "/pages/client/main/teams"
  },
  {
    key: "realName",
    text: "实名认证",
    url: "/pages/client/main/realName"
  },
  {
    key: "cards",
    text: "银行卡",
    url: "/pages/client/main/cards"
  },
  {
    key: "knapsack",
    url: "/pages/client/main/knapsack",
    text: "我的背包"
  },
  {
    key: "order",
    text: "我的订单",
    url: "/pages/client/main/orders"
  },
  {
    key: "address",
    text: "收货地址",
    url: "/pages/client/main/address"
  },
  {
    key: "service",
    text: "联系客服",
    url: "/pages/client/main/service"
  },
  {
    key: "setting",
    text: "设置",
    url: "/pages/client/main/setting"
  },
]

onTabItemTap((e) => {
  uni.setTabBarStyle({
    backgroundColor: "#ffffff",
    borderStyle: "white",
  });
});

const userInfo = ref<AnyObject>({});
onShow(() => {
  getUserInfo();
});

onPullDownRefresh(() => {
  getUserInfo();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 360);
});

const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      uni.hideToast();
      userInfo.value = data;
    }
  });
}

const copyText = (data: string) => {
  if (!data) {
    uni.showToast({ title: "复制失败", icon: "error" });
    return;
  }
  uni.setClipboardData({ data, showToast: true });
}

</script>

<style lang="scss" scoped>
// scss
</style>